<template>
    <!-- 调整发布设置的表单弹框组件 -->
    <Dialog :title="dialogConfig.title" :buttons="dialogConfig.buttons" :show="dialogConfig.show"
        @close="dialogConfig.show = false" :width="'600px'">
        <el-form :model="formData" :rules="rules" ref="formDataRef" label-width="100px" @submit.prevent>
            <el-form-item label="版本号">
                {{ formData.version }}
            </el-form-item>
            <el-form-item label="发布状态" prop="status">
                <el-radio-group v-model="formData.status">
                    <el-radio value="UNPUBLISHED">取消发布</el-radio>
                    <el-radio value="GRAYSCALE_RELEASE">灰度发布</el-radio>
                    <el-radio value="FULL_RELEASE">全网发布</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="灰度UID" prop="grayscaleIds"
                v-if="formData.status == 1 || formData.status == 'GRAYSCALE_RELEASE'">
                <div class="tag-panel">
                    <el-tag v-for="(tag, index) in formData.grayscaleIds" :key="index" closable @close="closeTag(index)"
                        :type="tag.type" class="tag">
                        {{ tag }}
                    </el-tag>
                    <div class="tag input" v-if="showInput">
                        <el-input size="small" clearable placeholder="请输入UID" v-model.trim="tagInput" @blur="addUserId"
                            @keyup.enter="addUserId"></el-input>
                    </div>
                    <div class="tag" v-if="!showInput">
                        <el-button type="primary" size="small" @click="showInputHandler">新增</el-button>
                    </div>
                </div>
            </el-form-item>
        </el-form>
    </Dialog>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

const dialogConfig = reactive({
    show: false,
    title: "发布更新",
    buttons: [
        {
            type: "primary",
            text: "确定",
            click: (e) => {
                submitData();
            },
        },
    ],
});

const formData = ref({})
const formDataRef = ref()
const rules = {
    status: [{ required: true, message: "请选择发布状态" }]
}

const emit = defineEmits(["reload"])
const submitData = () => {
    formDataRef.value.validate(async (valid) => {
        if (!valid) {
            return
        }
        let params = {}
        Object.assign(params, formData.value)
        if (params.grayscaleIds) {
            params.grayscaleIds = params.grayscaleIds.join(',')
        }
        let result = await proxy.Request({
            method: 'put',
            url: proxy.Api.releaseUpdate,
            params
        })
        if (!result) {
            return
        }
        proxy.Message.success('操作成功')
        dialogConfig.show = false
        emit('reload')
    })
}

const show = (data) => {
    dialogConfig.show = true
    nextTick(() => {
        formDataRef.value.resetFields()
        formData.value = Object.assign({}, data)
        formData.value.grayscaleIds = data.grayscaleIdList == null ? [] : data.grayscaleIdList
    })
}
defineExpose({
    show,
});

const showInput = ref(false)
const tagInput = ref('')

const addUserId = () => {
    if (tagInput.value) {
        formData.value.grayscaleIds.push(tagInput.value)
    }
    tagInput.value = ''
    showInput.value = false
}

const showInputHandler = () => {
    showInput.value = true
}

const closeTag = (index) => {
    formData.value.grayscaleIds.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.tag-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .tag {
        margin: 0px 5px 5px 0px;
    }

    .input {
        width: 150px;
    }
}
</style>
